<!DOCTYPE html>
<html  lang="zh">
<head><link rel=manifest href=/manifest.json>
    <meta charset="utf-8" />

<meta name="generator" content="Hexo 4.1.1" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

 <!-- pwa 配置-->
 <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.7/pwa/apple-touch-icon.png">
 <meta name="theme-color" content="white"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


<title>初级前端综合面试题-3 - Fox - Future diary</title>


    <meta name="description" content="今年2月份，裸辞来到成都，经过2个月的漫长的找工作道路，最终拿到5个offer，于是总结在面试过程中，面试问题，后续带更新中……  面试题汇总 css 如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。 如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？ 用纯CSS创建一个三角形的原理是什么？ 清除浮动的方法？ 实现预加载一张图片，加载完成后显示在网页中并设定其高度为5">
<meta property="og:type" content="article">
<meta property="og:title" content="初级前端综合面试题-3">
<meta property="og:url" content="https://foxhuli.top/posts/6659.html">
<meta property="og:site_name" content="Fox - Future diary">
<meta property="og:description" content="今年2月份，裸辞来到成都，经过2个月的漫长的找工作道路，最终拿到5个offer，于是总结在面试过程中，面试问题，后续带更新中……  面试题汇总 css 如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。 如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？ 用纯CSS创建一个三角形的原理是什么？ 清除浮动的方法？ 实现预加载一张图片，加载完成后显示在网页中并设定其高度为5">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&fm=26&gp=0.jpg">
<meta property="article:published_time" content="2020-04-26T05:14:51.000Z">
<meta property="article:modified_time" content="2020-05-02T09:30:31.995Z">
<meta property="article:author" content="Fox">
<meta property="article:tag" content="前端面试">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&fm=26&gp=0.jpg">



<link rel="canonical" href="https://foxhuli.top/" />





<link rel="icon" href="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.6/images/foxfavicon.png">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-dark.css">


    
    
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">

    
    
    
    
<link rel="stylesheet" href="/css/back-to-top.css">

    
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-160296449-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-160296449-1');
</script>

    
    <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?14528986";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>
    
    
    
    <link rel="stylesheet" href="/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
    
    <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    


<link rel="stylesheet" href="/css/style.css">

<link rel="alternate" href="/atom.xml" title="Fox - Future diary" type="application/atom+xml">
</head>
<body class="is-3-column">
    <nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/">
                <div>
                    
                        <img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.5/images/foxlogo.png" alt="初级前端综合面试题-3" height="28">
                    
                </div>
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/">首页</a>
                
                <a class="navbar-item"
                href="/archives">归档</a>
                
                <a class="navbar-item"
                href="/categories">分类</a>
                
                <a class="navbar-item"
                href="/tags">标签</a>
                
                <a class="navbar-item"
                href="/contact">留言板</a>
                
                <a class="navbar-item"
                href="/friends">友情链接</a>
                
                <a class="navbar-item"
                href="/about">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    


    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main">
<div class="card">
    
    <div class="card-image">
        <span  class="image is-7by1">
            <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
        </span>
    </div>
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time>
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;/&nbsp;<a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    1 小时 读完 (大约 9501 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    的 <span id="busuanzi_value_page_pv">0</span> 次陪伴
                </span>
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                初级前端综合面试题-3
            
        </h1>
        <div class="content">
            <blockquote>
<p>今年2月份，裸辞来到成都，经过2个月的漫长的找工作道路，最终拿到5个offer，于是总结在面试过程中，面试问题，后续带更新中……</p>
</blockquote>
<h2 id="面试题汇总"><a href="#面试题汇总" class="headerlink" title="面试题汇总"></a>面试题汇总</h2><ul>
<li><strong>css</strong><ul>
<li>如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。</li>
<li>如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？</li>
<li>用纯CSS创建一个三角形的原理是什么？</li>
<li>清除浮动的方法？</li>
<li>实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？</li>
</ul>
</li>
<li>html<ul>
<li>HTML中那些标签是 块级标签，那些是 行内标签，空标签<a id="more"></a></li>
</ul>
</li>
<li>js<ul>
<li>jQuery、js、vue取dom元素的方式</li>
<li>js的数据类型</li>
<li>js中全局变量和局部变量</li>
<li>js中那些是存储在站里面，那些是存储在 队里面</li>
<li>声明函数和异名函数的区别</li>
<li>闭包</li>
<li>函数里面的this含义？什么情况下，怎么用？</li>
<li>实现一个倒计时功能？</li>
</ul>
</li>
<li>网络/安全<ul>
<li>IOS七层模型、TCP和IP所在的层次（七层）</li>
<li>HTTP/TCP的区别</li>
<li>常见的web攻击有哪些？如何防范？</li>
</ul>
</li>
<li>存储<ul>
<li>请谈谈cookie的区别？</li>
</ul>
</li>
<li>请求<ul>
<li>ajax同步请求</li>
</ul>
</li>
<li><strong>vue</strong><ul>
<li>VUE中的MVVM的理解？</li>
<li>vue生命周期的作用是什么？</li>
<li>vue生命周期总共有几个阶段？</li>
<li>第一次加载页面会触发那几个钩子？</li>
<li>DOM渲染在哪个周期中就已经完成了？</li>
<li>父组件与子组件自己传值，兄弟组件传值？</li>
<li>vue与react的区别？</li>
<li>vue与angular的区别？</li>
<li>v-if 与 v-show的区别？</li>
<li>$route 与 $router的区别？</li>
<li>vue.js 的两个核心是什么？</li>
<li>vue常见的指令？</li>
<li>v-on可以绑定多个方法吗？</li>
<li>怎么定义vue-router的动态路由？如何获取传递过来的值？</li>
<li>vue-router的作用</li>
<li>在vue中v-for为何要使用 :key</li>
</ul>
</li>
<li>其他<ul>
<li>前端页面由那三层构成？分别是什么？作用是什么？</li>
<li>列举IE与其他浏览器不同的特性？</li>
<li>请说出三种减少页面加载时间的方法？</li>
</ul>
</li>
</ul>
<h2 id="css"><a href="#css" class="headerlink" title="css"></a>css</h2><h3 id="如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。"><a href="#如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。" class="headerlink" title="如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。"></a>如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。</h3><p>将图片设置为背景图</p>
<figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">width</span><span class="selector-pseudo">:100</span>%;</span><br><span class="line"><span class="selector-tag">height</span><span class="selector-pseudo">:100</span>%;</span><br><span class="line"><span class="selector-tag">background</span><span class="selector-pseudo">:url(demo.jpg)</span> <span class="selector-tag">no-repeat</span> <span class="selector-tag">center</span> <span class="selector-tag">center</span>;</span><br></pre></td></tr></tbody></table></figure>
<h3 id="如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？"><a href="#如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？" class="headerlink" title="如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？"></a>如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？</h3><blockquote>
<p>参考文档：<a href="https://blog.csdn.net/qq_41445106/article/details/97273169">https://blog.csdn.net/qq_41445106/article/details/97273169</a></p>
</blockquote>
<h4 id="如何水平居中一个div？"><a href="#如何水平居中一个div？" class="headerlink" title="如何水平居中一个div？"></a>如何水平居中一个div？</h4><p>1.不需要知道宽高</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">css</span>:</span><br><span class="line"><span class="selector-id">#wrap</span>{</span><br><span class="line"><span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"><span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"><span class="attribute">background</span>: orange;</span><br><span class="line"><span class="attribute">position</span>: absolute/fixed;</span><br><span class="line">      <span class="attribute">top</span>:<span class="number">0</span>;<span class="attribute">bottom</span>:<span class="number">0</span>;<span class="attribute">left</span>: <span class="number">0</span>;<span class="attribute">right</span>: <span class="number">0</span>;<span class="attribute">margin</span>:auto;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">html</span>:</span><br><span class="line">	&lt;div id="wrap"&lt;/div&gt;</span><br></pre></td></tr></tbody></table></figure>
<p>2.知道宽高</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">css</span>:</span><br><span class="line">	<span class="selector-id">#wrap</span>{</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">background</span>: orange;</span><br><span class="line">	<span class="attribute">position</span>: absolute;</span><br><span class="line">	<span class="attribute">top</span>:<span class="number">50%</span>;<span class="attribute">left</span>: <span class="number">50%</span>;<span class="attribute">margin-top</span>:-<span class="number">100px</span>;<span class="attribute">margin-left</span>: -<span class="number">100px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">html</span>:</span><br><span class="line">	&lt;div id="wrap"&lt;/div&gt;</span><br></pre></td></tr></tbody></table></figure>
<p>3.弹性盒</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">css</span>:</span><br><span class="line">	*{<span class="attribute">margin</span>:<span class="number">0</span>;<span class="attribute">padding</span>: <span class="number">0</span>;}</span><br><span class="line">	<span class="selector-tag">html</span>,<span class="selector-tag">body</span>{</span><br><span class="line">		<span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">	}</span><br><span class="line">	<span class="selector-tag">body</span>{</span><br><span class="line">		<span class="attribute">display</span>: flex;</span><br><span class="line">		<span class="attribute">justify-content</span>: center;</span><br><span class="line">		<span class="attribute">align-items</span>: center;</span><br><span class="line">	}</span><br><span class="line">	<span class="selector-id">#wrap</span>{</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">background</span>: orange;</span><br><span class="line">	}</span><br><span class="line"><span class="selector-tag">html</span>:</span><br><span class="line">		&lt;div id="wrap"&lt;/div&gt;</span><br></pre></td></tr></tbody></table></figure>
<h4 id="如何居中一个浮动元素？"><a href="#如何居中一个浮动元素？" class="headerlink" title="如何居中一个浮动元素？"></a>如何居中一个浮动元素？</h4><figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">css</span>:</span><br><span class="line"><span class="selector-class">.outerbox</span> {</span><br><span class="line">	<span class="attribute">float</span>: left;</span><br><span class="line">	<span class="attribute">position</span>: relative;</span><br><span class="line">	<span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.innerbox</span> {</span><br><span class="line">	<span class="attribute">float</span>: left;</span><br><span class="line">	<span class="attribute">position</span>: relative;</span><br><span class="line">	<span class="attribute">right</span>: <span class="number">50%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">html</span>:</span><br><span class="line">&lt;div class="outerbox"&gt;</span><br><span class="line">	&lt;div class="innerbox"&gt;我是浮动的&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></tbody></table></figure>
<h4 id="如何让绝对定位的div居中"><a href="#如何让绝对定位的div居中" class="headerlink" title="如何让绝对定位的div居中"></a>如何让绝对定位的div居中</h4><figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">css</span>:</span><br><span class="line"><span class="selector-class">.center</span>{</span><br><span class="line">         <span class="attribute">position</span>: absolute; <span class="comment">/*绝对定位*/</span></span><br><span class="line">         <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">         <span class="attribute">height</span>:<span class="number">300px</span>;</span><br><span class="line">         <span class="attribute">background</span>: red;</span><br><span class="line">         <span class="attribute">margin</span>: <span class="number">0</span> auto; <span class="comment">/*水平居中*/</span></span><br><span class="line">         <span class="attribute">left</span>: <span class="number">0</span>; <span class="comment">/*此处不能省略，且为0*/</span></span><br><span class="line">         <span class="attribute">right</span>: <span class="number">0</span>; <span class="comment">/*此处不能省略，且为0*/</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">html</span>:</span><br><span class="line">&lt;div class="center"&gt;&lt;/div&gt;</span><br></pre></td></tr></tbody></table></figure>
<h3 id="用纯CSS创建一个三角形的原理是什么？"><a href="#用纯CSS创建一个三角形的原理是什么？" class="headerlink" title="用纯CSS创建一个三角形的原理是什么？"></a>用纯CSS创建一个三角形的原理是什么？</h3><p>新增一个正方形或者长方形，给对应的边框设置为 透明色(transparent)</p>
<p>核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">style</span>&gt;</span><br><span class="line">    <span class="selector-class">.box</span> {</span><br><span class="line">      <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">      <span class="attribute">border-top</span>: <span class="number">40px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-left</span>: <span class="number">40px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-right</span>: <span class="number">40px</span> solid transparent;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">40px</span> solid <span class="number">#ff0000</span>;</span><br><span class="line">    }</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">  &lt;div class="box"&gt;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/body&gt;</span><br></pre></td></tr></tbody></table></figure>
<h3 id="清除浮动的方法？"><a href="#清除浮动的方法？" class="headerlink" title="清除浮动的方法？"></a>清除浮动的方法？</h3><blockquote>
<p>具体代码参考：<a href="https://blog.csdn.net/h_qingyi/article/details/81269667">https://blog.csdn.net/h_qingyi/article/details/81269667</a></p>
</blockquote>
<ul>
<li>采用 clear：both方式</li>
<li>采用float清除浮动</li>
<li>采用伪元素 :after 清除互动</li>
<li>before和after双伪元素清除浮动</li>
</ul>
<h3 id="实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？"><a href="#实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？" class="headerlink" title="实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？"></a>实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？</h3><p>预加载事件为onload，加载成功后为图片设置样式。</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> imgObj = <span class="built_in">document</span>.getElementById(<span class="string">'imgObg'</span>);</span><br><span class="line">addImg(<span class="string">'5.png'</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addImg</span>(<span class="params">isrc</span>) </span>{</span><br><span class="line">    imgObj1 = <span class="keyword">new</span> Image();</span><br><span class="line">    imgObj1.src = isrc;</span><br><span class="line">    imgObj1.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">        imgObj.src = <span class="keyword">this</span>.src;</span><br><span class="line">        imgObj.height = <span class="number">50</span>;</span><br><span class="line">        imgObj.width = <span class="number">50</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<hr>

<h2 id="html"><a href="#html" class="headerlink" title="html"></a>html</h2><h3 id="HTML中那些标签是-块级标签，那些是-行内标签，空标签"><a href="#HTML中那些标签是-块级标签，那些是-行内标签，空标签" class="headerlink" title="HTML中那些标签是 块级标签，那些是 行内标签，空标签"></a>HTML中那些标签是 块级标签，那些是 行内标签，空标签</h3><blockquote>
<p>参考文献：<a href="https://www.cnblogs.com/iverson666/p/9169274.html">https://www.cnblogs.com/iverson666/p/9169274.html</a></p>
</blockquote>
<p>块级元素：块级大多为结构性标记</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line">  <span class="tag">&lt;<span class="name">address</span>&gt;</span>...<span class="tag">&lt;/<span class="name">adderss</span>&gt;</span>   </span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">center</span>&gt;</span>...<span class="tag">&lt;/<span class="name">center</span>&gt;</span>  地址文字</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>...<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>  标题一级</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>...<span class="tag">&lt;/<span class="name">h2</span>&gt;</span>  标题二级</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span>&gt;</span>...<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>  标题三级</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">h4</span>&gt;</span>...<span class="tag">&lt;/<span class="name">h4</span>&gt;</span>  标题四级</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">h5</span>&gt;</span>...<span class="tag">&lt;/<span class="name">h5</span>&gt;</span>  标题五级</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">h6</span>&gt;</span>...<span class="tag">&lt;/<span class="name">h6</span>&gt;</span>  标题六级</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">hr</span>&gt;</span>  水平分割线</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>...<span class="tag">&lt;/<span class="name">p</span>&gt;</span>  段落</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">pre</span>&gt;</span>...<span class="tag">&lt;/<span class="name">pre</span>&gt;</span>  预格式化</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">blockquote</span>&gt;</span>...<span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span>  段落缩进   前后5个字符</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">marquee</span>&gt;</span>...<span class="tag">&lt;/<span class="name">marquee</span>&gt;</span>  滚动文本</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span>...<span class="tag">&lt;/<span class="name">ul</span>&gt;</span>  无序列表</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">ol</span>&gt;</span>...<span class="tag">&lt;/<span class="name">ol</span>&gt;</span>  有序列表</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">dl</span>&gt;</span>...<span class="tag">&lt;/<span class="name">dl</span>&gt;</span>  定义列表</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">table</span>&gt;</span>...<span class="tag">&lt;/<span class="name">table</span>&gt;</span>  表格</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">form</span>&gt;</span>...<span class="tag">&lt;/<span class="name">form</span>&gt;</span>  表单</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">·块级元素</span><br><span class="line"></span><br><span class="line">  1.总是从新的一行开始</span><br><span class="line"></span><br><span class="line">  2.高度、宽度都是可控的</span><br><span class="line"></span><br><span class="line">  3.宽度没有设置时，默认为100%</span><br><span class="line"></span><br><span class="line">  4.块级元素中可以包含块级元素和行内元素</span><br><span class="line"></span><br><span class="line">  5.都有align属性</span><br><span class="line"></span><br><span class="line">  6.dispay都是block</span><br></pre></td></tr></tbody></table></figure>
<p>行内元素：行内大多为描述性标记</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">  <span class="tag">&lt;<span class="name">span</span>&gt;</span>...<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span>&gt;</span>...<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  链接</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">br</span>&gt;</span>  换行</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">b</span>&gt;</span>...<span class="tag">&lt;/<span class="name">b</span>&gt;</span>  加粗</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">strong</span>&gt;</span>...<span class="tag">&lt;/<span class="name">strong</span>&gt;</span>  加粗</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> &gt;</span>  图片</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">sup</span>&gt;</span>...<span class="tag">&lt;/<span class="name">sup</span>&gt;</span>  上标</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">sub</span>&gt;</span>...<span class="tag">&lt;/<span class="name">sub</span>&gt;</span>  下标</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">i</span>&gt;</span>...<span class="tag">&lt;/<span class="name">i</span>&gt;</span>  斜体</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">em</span>&gt;</span>...<span class="tag">&lt;/<span class="name">em</span>&gt;</span>  斜体</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">del</span>&gt;</span>...<span class="tag">&lt;/<span class="name">del</span>&gt;</span>  删除线</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">u</span>&gt;</span>...<span class="tag">&lt;/<span class="name">u</span>&gt;</span>  下划线</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span>&gt;</span>...<span class="tag">&lt;/<span class="name">input</span>&gt;</span>  文本框</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">textarea</span>&gt;</span>...<span class="tag">&lt;/<span class="name">textarea</span>&gt;</span>  多行文本</span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">select</span>&gt;</span>...<span class="tag">&lt;/<span class="name">select</span>&gt;</span>  下拉列表</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">·行内元素</span><br><span class="line"></span><br><span class="line">  1.和其他元素都在一行</span><br><span class="line"></span><br><span class="line">  2.高度、宽度以及内边距都是不可控的</span><br><span class="line"></span><br><span class="line">  3.宽高就是内容的高度，不可以改变</span><br><span class="line"></span><br><span class="line">  4.行内元素只能行内元素，不能包含块级元素</span><br><span class="line"></span><br><span class="line">  5.没有align属性</span><br><span class="line"></span><br><span class="line">  6.display都是inline</span><br></pre></td></tr></tbody></table></figure>
<p>空标签</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">br</span>/&gt;</span> //换行</span><br><span class="line"><span class="tag">&lt;<span class="name">hr</span>&gt;</span> //分隔线</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span>&gt;</span> //文本框等</span><br><span class="line"><span class="tag">&lt;<span class="name">img</span>&gt;</span> //图片</span><br><span class="line"><span class="tag">&lt;<span class="name">link</span>&gt;</span> //链接</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span>&gt;</span> //媒体</span><br></pre></td></tr></tbody></table></figure>
<hr>

<h2 id="js"><a href="#js" class="headerlink" title="js"></a>js</h2><h3 id="jQuery获取dom元素的方式"><a href="#jQuery获取dom元素的方式" class="headerlink" title="jQuery获取dom元素的方式"></a>jQuery获取dom元素的方式</h3><blockquote>
<p>参考文档：<a href="https://www.cnblogs.com/fushuxin/p/10098584.html">https://www.cnblogs.com/fushuxin/p/10098584.html</a></p>
</blockquote>
<p><strong>jQuery获取dom元素</strong></p>
<p>DOM对象转jQuery对象:例子: $(DOM对象)</p>
<p>jQuery对象转DOM对象:例子: $(‘#btn’)[0]或者: $(‘#btn’).get(0);</p>
<p><strong>JS获取DOM元素的方法（8种）</strong></p>
<ol>
<li>通过ID获取（getElementById）</li>
<li>通过name属性（getElementsByName）</li>
<li>通过标签名（getElementsByTagName）</li>
<li>通过类名（getElementsByClassName）</li>
<li>获取html的方法（document.documentElement）</li>
<li>获取body的方法（document.body）</li>
<li>通过选择器获取一个元素（querySelector）</li>
<li>通过选择器获取一组元素（querySelectorAll）</li>
</ol>
<p><strong>vue获取DOM元素的方法</strong></p>
<p>在标签中加上ref=’dom’，然后在代码中this.$refs.dom这样就拿到了页面元素了。</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">例如：&lt;div class='wrap' ref='box'&gt;Hello world!&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">让Hello world!的颜色显示为红色：</span><br><span class="line">this.$refs.box.style.color = "red"</span><br></pre></td></tr></tbody></table></figure>
<h3 id="js的数据类型"><a href="#js的数据类型" class="headerlink" title="js的数据类型"></a>js的数据类型</h3><p>Number、undefined、string、null、symbol、bigint、boolean、object</p>
<p>JS数据类型：Object 中包含了哪几种类型？</p>
<p>   其中包含了Data、function、Array等。这三种是常规用的。</p>
<blockquote>
<p>更多详情参考：<a href="https://blog.csdn.net/u013592575/article/details/95087953">https://blog.csdn.net/u013592575/article/details/95087953</a></p>
</blockquote>
<h3 id="声明函数和异名函数的区别"><a href="#声明函数和异名函数的区别" class="headerlink" title="声明函数和异名函数的区别"></a>声明函数和异名函数的区别</h3><p><strong>有名函数和无名函数的区别是：有名函数可以先调用，再定义，而无名函数就需要先定义再使用</strong></p>
<h3 id="js中全局变量和局部变量"><a href="#js中全局变量和局部变量" class="headerlink" title="js中全局变量和局部变量"></a>js中全局变量和局部变量</h3><ul>
<li>全局变量<ul>
<li>采用var来定义的变量，是挂载到window对象里面，所以被称为 <strong>全局变量</strong></li>
</ul>
</li>
<li>局部变量<ul>
<li>采用let 或者 const 在局部中定义的 变量，被称为 <strong>局部变量</strong>，局部变量只能在 该范围内才可以调用，否则调用会报错。</li>
</ul>
</li>
</ul>
<h3 id="js中那些是存储在站里面，那些是存储在-队里面"><a href="#js中那些是存储在站里面，那些是存储在-队里面" class="headerlink" title="js中那些是存储在站里面，那些是存储在 队里面"></a>js中那些是存储在站里面，那些是存储在 队里面</h3><h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><blockquote>
<p>参考文献：<a href="https://baike.baidu.com/item/闭包/10908873?fr=aladdin">https://baike.baidu.com/item/%E9%97%AD%E5%8C%85/10908873?fr=aladdin</a></p>
</blockquote>
<p>闭包的概念就是：函数A中包含函数B，函数B可以调用函数A的中变量，那么函数B则称为闭包。</p>
<p>闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取<a href="https://baike.baidu.com/item/局部变量/9844788">局部变量</a>，所以闭包可以理解成“定义在一个<a href="https://baike.baidu.com/item/函数/301912">函数</a>内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。 [1]</p>
<p>例如：</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>{</span><br><span class="line">	<span class="keyword">var</span> i=<span class="number">0</span>;</span><br><span class="line">	<span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params"></span>)</span>{</span><br><span class="line">		alert(++i);</span><br><span class="line">	}</span><br><span class="line">	<span class="keyword">return</span> b;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> c=a();</span><br><span class="line">c();</span><br></pre></td></tr></tbody></table></figure>
<h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><p>这段代码有两个特点：</p>
<p>1、函数b嵌套在函数a内部；</p>
<p>2、函数a返回函数b。</p>
<p>这样在执行完var c=a( )后，变量c实际上是指向了函数b，再执行c( )后就会弹出一个窗口显示i的值（第一次为1）。这段代码其实就创建了一个闭包，这是因为函数a外的变量c引用了函数a内的函数b。也就是说，当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。</p>
<h4 id="作用"><a href="#作用" class="headerlink" title="作用"></a>作用</h4><p>简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。</p>
<p>在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。</p>
<p>那 么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引 用，因此函数a和b互相引用但又不被外界打扰（被外界引用），函数a和b就会被回收。</p>
<h3 id="函数里面的this含义？什么情况下，怎么用？"><a href="#函数里面的this含义？什么情况下，怎么用？" class="headerlink" title="函数里面的this含义？什么情况下，怎么用？"></a>函数里面的this含义？什么情况下，怎么用？</h3><p><img src="https://user-gold-cdn.xitu.io/2018/11/15/16717eaf3383aae8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="this指向"></p>
<h3 id="实现一个倒计时功能？"><a href="#实现一个倒计时功能？" class="headerlink" title="实现一个倒计时功能？"></a>实现一个倒计时功能？</h3><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"time"</span>&gt;</span><br><span class="line">        &lt;span id=<span class="string">"showTime"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">function countDown(time,id){</span></span><br><span class="line"><span class="regexp">        var startTime = new Date();</span></span><br><span class="line"><span class="regexp">        var endTime = new Date(time);</span></span><br><span class="line"><span class="regexp">        var distance = endTime.getTime() - startTime.getTime();</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">        var day = 0;</span></span><br><span class="line"><span class="regexp">        var hour = 0;</span></span><br><span class="line"><span class="regexp">        var minute = 0;</span></span><br><span class="line"><span class="regexp">        var second =0;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">        if(distance&gt;=0){</span></span><br><span class="line"><span class="regexp">            day = Math.floor(distance/</span><span class="number">1000</span>/<span class="number">60</span>/<span class="number">60</span>/<span class="number">24</span>);</span><br><span class="line">            hour = <span class="built_in">Math</span>.floor(distance/<span class="number">1000</span>/<span class="number">60</span>/<span class="number">60</span>%<span class="number">24</span>);</span><br><span class="line">            minute = <span class="built_in">Math</span>.floor(distance/<span class="number">1000</span>/<span class="number">60</span>%<span class="number">60</span>);</span><br><span class="line">            second = <span class="built_in">Math</span>.floor(distance/<span class="number">1000</span>%<span class="number">60</span>);</span><br><span class="line">        }<span class="keyword">else</span>{</span><br><span class="line">            alert(<span class="string">"倒计时活动已结束"</span>);</span><br><span class="line">        }</span><br><span class="line">        <span class="built_in">document</span>.getElementById(id).innerHTML = day + <span class="string">"天"</span> +  hour + <span class="string">"时"</span> + minute + <span class="string">"分"</span> + second + <span class="string">"秒"</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="comment">// countDown('2019/07/25 19:15:00','showInterval');</span></span><br><span class="line">    setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{countDown(<span class="string">'2019/07/26 12:00:00'</span>,<span class="string">'showTime'</span>);},<span class="number">0</span>);</span><br><span class="line">&lt;script&gt;</span><br></pre></td></tr></tbody></table></figure>
<hr>

<h2 id="网络-安全"><a href="#网络-安全" class="headerlink" title="网络/安全"></a>网络/安全</h2><h3 id="IOS七层模型"><a href="#IOS七层模型" class="headerlink" title="IOS七层模型"></a>IOS七层模型</h3><blockquote>
<p>参考文献：</p>
<p><a href="[https://baike.baidu.com/item/%E4%B8%83%E5%B1%82%E6%A8%A1%E5%9E%8B/1441391?fr=aladdin](https://baike.baidu.com/item/七层模型/1441391?fr=aladdin">百度文科</a>）</p>
</blockquote>
<p>iOS七层模型分别是：物理层、数据链路层、网络层、传输层、表示层、会话层、应用层</p>
<ul>
<li>应用层</li>
</ul>
<p>​      网络服务与最终用户的一个接口。</p>
<p>​     协议有：<strong>HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP</strong></p>
<ul>
<li>表示层</li>
</ul>
<p>​     数据的表示、安全、压缩。（在五层模型里面已经合并到了应用层）</p>
<p>​     格式有，<strong>JPEG、ASCll、EBCDIC、加密格式等 [2]</strong> </p>
<ul>
<li>会话层</li>
</ul>
<p>​    建立、管理、终止会话。（在五层模型里面已经合并到了应用层）</p>
<p>​    <strong>对应主机进程，指本地主机与远程主机正在进行的会话</strong></p>
<ul>
<li>传输层</li>
</ul>
<p>​    定义传输数据的协议端口号，以及流控和差错校验。</p>
<p>   协议有：<strong>TCP UDP，数据包一旦离开网卡即进入网络传输层</strong></p>
<ul>
<li><p>网络层</p>
<p> 进行逻辑地址寻址，实现不同网络之间的路径选择。</p>
<p> 协议有：<strong>ICMP IGMP IP（IPV4 IPV6）</strong></p>
</li>
<li><p>数据链路层</p>
<p> 建立逻辑连接、进行硬件地址寻址、差错校验 [3] 等功能。（由底层网络定义协议）</p>
<p> 将比特组合成字节进而组合成帧，用MAC地址访问介质，错误发现但不能纠正。</p>
</li>
<li><p>物理层</p>
<p> 建立、维护、断开物理连接。（由底层网络定义协议）</p>
</li>
</ul>
<h3 id="HTTP-TCP的区别"><a href="#HTTP-TCP的区别" class="headerlink" title="HTTP/TCP的区别"></a>HTTP/TCP的区别</h3><blockquote>
<p>参考文献：<a href="https://www.cnblogs.com/sunshine-blog/p/8393264.html">https://www.cnblogs.com/sunshine-blog/p/8393264.html</a></p>
</blockquote>
<p>HTTP：超文本传输协议，位于七层模型中的 应用层，默认HTTP的端口为80；HTTPS的端口号为443。</p>
<p>TCP：位于七层模型中的 传输层。三次握手，四次挥手</p>
<h4 id="HTTP的优点"><a href="#HTTP的优点" class="headerlink" title="HTTP的优点"></a>HTTP的优点</h4><ul>
<li>简单快捷。HTTP协议简单、通信速度很快</li>
<li>灵活。HTTP协议允许传输任意类型的数据</li>
<li>短连接。HTTP协议限制每次连接只处理一个请求，服务器对客户端的请求作出响应后，马上断开连接。这种传输方式可以节省传输时间。</li>
</ul>
<h4 id="TCP连接——三次握手"><a href="#TCP连接——三次握手" class="headerlink" title="TCP连接——三次握手"></a>TCP连接——三次握手</h4><ul>
<li>建立一个TCP连接需要经过“三次握手”。TCP三次握手具体过程如下：</li>
</ul>
<ol>
<li>第一次握手：客户端发送syn包（syn=j）到服务器，并进入SYN_SEND状态。等待服务器确认。</li>
<li>第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态。</li>
<li>第三次握手：客户端接收到服务器的SYN_ACK包，向服务器发送确认包ACK（ack=k+1），包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。</li>
</ol>
<h3 id="常见的web攻击有哪些？如何防范？"><a href="#常见的web攻击有哪些？如何防范？" class="headerlink" title="常见的web攻击有哪些？如何防范？"></a>常见的web攻击有哪些？如何防范？</h3><blockquote>
<p>参考文档：<a href="https://www.cnblogs.com/smallJunJun/p/11187796.html">https://www.cnblogs.com/smallJunJun/p/11187796.html</a></p>
</blockquote>
<h4 id="1-xss跨站脚本攻击"><a href="#1-xss跨站脚本攻击" class="headerlink" title="1.xss跨站脚本攻击"></a>1.xss跨站脚本攻击</h4><p>比如在表单Input框里面输入一段js代码</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">"/&gt;&lt;script&gt;alert("xss")&lt;/script&gt;&lt;</span><br></pre></td></tr></tbody></table></figure>
<p>就会执行这一段脚本，弹出窗口</p>
<p><strong>如何防范XSS攻击</strong></p>
<p>前端，服务端需同时对HTML标签做转义处理。将其中的”&lt;”,”&gt;”等特殊字符进行转义编码。</p>
<h4 id="2-CSRF攻击流程"><a href="#2-CSRF攻击流程" class="headerlink" title="2.CSRF攻击流程"></a>2.CSRF攻击流程</h4><ol>
<li>用户登录受信任网站A；</li>
<li>在不退出网站A的情况下，访问危险网站B（攻击者网站或攻击者挂马的网站）。</li>
</ol>
<p>例如：</p>
<p><strong>如何防范CSRF攻击</strong></p>
<ul>
<li>token机制</li>
</ul>
<p>在HTTP请求中进行token验证，如果请求中没有token或者token内容不正确，则认为CSRF攻击而拒绝该请求。</p>
<ul>
<li>referer检测</li>
</ul>
<p>在HTTP Header中有一个字段Referer，它记录了HTTP请求的来源地址，如果Referer是其他网站，就有可能是CSRF攻击，则拒绝该请求。<br>但是，服务器并非都能取到Referer。很多用户出于隐私保护的考虑，限制了Referer的发送。在某些情况下，浏览器也不会发送Referer，例如HTTPS跳转到HTTP。</p>
<h4 id="3-SQL注入，关键是通过用sql语句伪造参数发出攻击"><a href="#3-SQL注入，关键是通过用sql语句伪造参数发出攻击" class="headerlink" title="3.SQL注入，关键是通过用sql语句伪造参数发出攻击"></a>3.SQL注入，关键是通过用sql语句伪造参数发出攻击</h4><h4 id="4-DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）"><a href="#4-DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）" class="headerlink" title="4.DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）"></a>4.DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）</h4><h4 id="5-DNS劫持："><a href="#5-DNS劫持：" class="headerlink" title="5.DNS劫持："></a>5.DNS劫持：</h4><p>通过某些手段获得某域名的解析控制权，修改此域名的解析结果，导致对该</p>
<p>域名的访问由原 ip 地址转入到修改后的指定 ip。其结果是对特定的网址不能访问或访问的</p>
<p>是假网址。</p>
<hr>

<h2 id="存储"><a href="#存储" class="headerlink" title="存储"></a>存储</h2><h3 id="请谈谈cookie的区别？"><a href="#请谈谈cookie的区别？" class="headerlink" title="请谈谈cookie的区别？"></a>请谈谈cookie的区别？</h3><blockquote>
<p>阅读文档：<a href="https://blog.csdn.net/zxxvip/article/details/73314608">https://blog.csdn.net/zxxvip/article/details/73314608</a></p>
</blockquote>
<h2 id="请求"><a href="#请求" class="headerlink" title="请求"></a>请求</h2><h3 id="ajax同步请求-同时并发请求"><a href="#ajax同步请求-同时并发请求" class="headerlink" title="ajax同步请求/同时并发请求"></a>ajax同步请求/同时并发请求</h3><p><strong>ajax同步请求：采用 async：false（同步请求），默认为 true异步请求</strong></p>
<p>当async属性的值为false时是同步的，Ajax请求将整个浏览器锁死，只有ajax请求返回结果后，才执行ajax后面的alert语句。</p>
<p>当async属性的值为true时是异步的，即不会等待ajax请求返回的结果，会直接执行ajax后面的alert语句。</p>
<p><strong>同时并发请求</strong></p>
<p>$.Deferred();</p>
<blockquote>
<p>更多详细说明：<a href="https://blog.csdn.net/yintianqin/article/details/60962175">https://blog.csdn.net/yintianqin/article/details/60962175</a></p>
</blockquote>
<hr>



<h2 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h2><blockquote>
<p>vue官网：<a href="https://cn.vuejs.org/">https://cn.vuejs.org/</a> </p>
</blockquote>
<h3 id="VUE中的MVVM的理解？"><a href="#VUE中的MVVM的理解？" class="headerlink" title="VUE中的MVVM的理解？"></a>VUE中的MVVM的理解？</h3><blockquote>
<p>参考文献：<strong><a href="https://juejin.im/post/5d12cd9df265da1bb47d73bf">https://juejin.im/post/5d12cd9df265da1bb47d73bf</a></strong></p>
</blockquote>
<p>MVVM 是 Model-View-ViewModel 的缩写。</p>
<p>Model代表数据模型，也可以在Model中定义操作数据变化的业务逻辑；</p>
<p>View 代表UI视图，它负责将数据模型转化成UI 展现出来；</p>
<p>ViewModel 监听Model中数据的改变和控制View层的展现；</p>
<p>在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上；</p>
<p>ViewModel通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。</p>
<p><strong>相当于就是 数据驱动视图、视图驱动数据，从而实现数据的双向绑定</strong></p>
<h3 id="vue生命周期的作用是什么？"><a href="#vue生命周期的作用是什么？" class="headerlink" title="vue生命周期的作用是什么？"></a>vue生命周期的作用是什么？</h3><blockquote>
<p>参考文献：<strong><a href="https://juejin.im/post/5d12cd9df265da1bb47d73bf">https://juejin.im/post/5d12cd9df265da1bb47d73bf</a></strong></p>
</blockquote>
<p><code>beforeCreate</code>：实例创建前被调用；</p>
<p><code>created</code>：实例创建后被调用，完成数据观测，属性和方法的运算，watch/event事件回调，模板渲染成html前（vm.$el未定义）故数据初始化最好在这阶段完成；</p>
<p><code>beforeMount</code>：在<code>$el</code>挂载前被调用，相关的 render 函数首次被调用，期间将模块渲染成html,此时<code>vm.$el</code>还是未定义；</p>
<p><code>mounted</code>：在<code>$el</code>挂载后被调用，此时<code>vm.$el</code>可以调用，不能保证所有的子组件都挂载，要等视图全部更新完毕用<code>vm.$nextTick()</code>;</p>
<p><code>beforeUpdate</code>：数据更新时调用;</p>
<p><code>updated</code>：数据更新后调用;</p>
<p><code>activated</code>：<code>&lt;keep-alive/&gt;</code>包裹的组件激活时调用；</p>
<p><code>deactivated</code>:<code>&lt;keep-alive/&gt;</code>包裹的组件离开时调用；</p>
<p><code>beforeDestroy</code>:实例销毁之前调用,此时实例仍然完全可用；</p>
<p><code>destroyed</code>：实例销毁之后调用,此时实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</p>
<h3 id="vue生命周期总共有几个阶段？"><a href="#vue生命周期总共有几个阶段？" class="headerlink" title="vue生命周期总共有几个阶段？"></a>vue生命周期总共有几个阶段？</h3><p>vue生命周期一共有8个阶段，分别是：</p>
<p>创建前/后、载入前/后、更新前/后、销毁前/后</p>
<ul>
<li><code>beforeCreate</code>：实例创建前被调用；</li>
<li><code>created</code>：实例创建后被调用，完成数据观测，属性和方法的运算，watch/event事件回调，模板渲染成html前（vm.$el未定义）故数据初始化最好在这阶段完成；</li>
<li><code>beforeMount</code>：在<code>$el</code>挂载前被调用，相关的 render 函数首次被调用，期间将模块渲染成html,此时<code>vm.$el</code>还是未定义</li>
<li><code>mounted</code>：在<code>$el</code>挂载后被调用，此时<code>vm.$el</code>可以调用，不能保证所有的子组件都挂载，要等视图全部更新完毕用<code>vm.$nextTick()</code>;</li>
<li><code>beforeUpdate</code>：数据更新时调用;</li>
<li><code>updated</code>：数据更新后调用;</li>
<li><code>beforeDestroy</code>:实例销毁之前调用,此时实例仍然完全可用；</li>
<li><code>destroyed</code>：实例销毁之后调用,此时实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</li>
</ul>
<h3 id="第一次加载页面会触发那几个钩子？"><a href="#第一次加载页面会触发那几个钩子？" class="headerlink" title="第一次加载页面会触发那几个钩子？"></a>第一次加载页面会触发那几个钩子？</h3><p>第一加载页面是会触发：beforecreate、created、beforemount、mount</p>
<h3 id="DOM渲染在哪个周期中就已经完成了？"><a href="#DOM渲染在哪个周期中就已经完成了？" class="headerlink" title="DOM渲染在哪个周期中就已经完成了？"></a>DOM渲染在哪个周期中就已经完成了？</h3><p>在 mount钩子就已经创建完成。</p>
<h3 id="父组件与子组件自己传值，兄弟组件传值？"><a href="#父组件与子组件自己传值，兄弟组件传值？" class="headerlink" title="父组件与子组件自己传值，兄弟组件传值？"></a>父组件与子组件自己传值，兄弟组件传值？</h3><p>props/$emit（父子通信）$refs/ref（父子通信）</p>
<p>$children/$parent（父子通信）</p>
<p>$attrs/$listeners（父子通信、跨级通信）</p>
<p>provide/inject（父子通信、跨级通信）</p>
<p>eventBus（父子通信、跨级通信、兄弟通信）</p>
<p>vuex（父子通信、跨级通信、兄弟通信、路由视图级别通信）</p>
<p>localStorage/sessionStorage等基于浏览器客户端的存储（父子通信、跨级通信、兄弟通信、路由</p>
<p>视图级别通信）</p>
<h3 id="vue与react的区别？"><a href="#vue与react的区别？" class="headerlink" title="vue与react的区别？"></a>vue与react的区别？</h3><blockquote>
<p>参考文献：<a href="https://www.cnblogs.com/theblogs/p/10423596.html">https://www.cnblogs.com/theblogs/p/10423596.html</a></p>
</blockquote>
<p>React 和Vue是现在主流的两个框架（相对来说angular用的已经少了）</p>
<p>两者的区别体现在以下方面</p>
<p><strong>相同点：</strong></p>
<p>1、react和vue都支持服务端渲染</p>
<p>2、都有虚拟DOM，组件化开发，通过props传参进行父子组件数据的传递</p>
<p>3、都是数据驱动视图</p>
<p>4、都有支持native的方案（react的react native，vue的weex）</p>
<p>5、都有状态管理（react有redux，vue有vuex）</p>
<p><strong>不同点：</strong></p>
<p>1、react严格上只能算是MVC的view层，vue则是MVVM模式</p>
<p>2、虚拟DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树</p>
<p>而对于react而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制</p>
<p>3、组件写法不一样，react推荐的做法是JSX+inline style,也就是把HTML和CSS全都写进javaScript了</p>
<p>4、数据绑定：vue实现了数据的双向绑定，react数据流动是单向的</p>
<p>5、state对象在react应用中是不可变的，需要使用setState方法更新状态</p>
<p>在vue中，state对象不是必须的，数据有data属性在vue对象中管理</p>
<h3 id="vue与angular的区别？"><a href="#vue与angular的区别？" class="headerlink" title="vue与angular的区别？"></a>vue与angular的区别？</h3><blockquote>
<p>参考文档： <a href="https://www.cnblogs.com/dhpong/p/10771267.html">https://www.cnblogs.com/dhpong/p/10771267.html</a></p>
</blockquote>
<p><strong>相同：</strong></p>
<p>1.数据绑定：vue和angular绑定都可以用</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{{ }}</span><br></pre></td></tr></tbody></table></figure>
<p>2.都支持内置指令和自定义指令</p>
<p>3.都支持内置过滤器和自定义过滤器。</p>
<p><strong>区别：</strong></p>
<p>1.学习成本和API 设计：vue相比于angular来说更加的简单</p>
<p>angular:学习成本比较高，比如增加了dependency injiction特性。Angular 尽管学习曲线较为陡峭，但却是构建完整复杂应用的好选择。</p>
<p>vue：本身提供的API都比较简单、直观。Vue.js 是轻量级的开发框架，很适合开发小规模灵活的 Web 应用程序；</p>
<p>在 API 与设计两方面上 vue比 angular 简单得多，因此你可以快速地掌握它的全部特性并投入开发。</p>
<ol>
<li>性能上：</li>
</ol>
<p>angular：依赖对数据做脏检测，所以watcher越来越多；</p>
<p>vue：使用基于依赖追踪的观察，并且使用异步队列更新，所有的数据都是独立触发的。</p>
<p>.vue的双向绑定是基于ES5 的 getter/setter来实现的，而angular而是由自己实现一套模版编译规则，需要进行所谓的“脏”检查，vue则不需要。</p>
<p>因此，vue在性能上更高效，但是代价是对于ie9以下的浏览器无法支持。</p>
<p>3.运行速度:vue相当于angular要变得小巧很多，运行速度比angular快.</p>
<p>4.指令：vue指令用v-xxx，angular用ng-xxx</p>
<p>angular用的指令是ng-前缀的，而vue是v-</p>
<p>5.组件：vue有组件化概念，angular中没有</p>
<p>6.数据存放位置： vue中数据放在data对象里面，angular数据绑定在$scope上面。</p>
<p>7.挂载数据方式：</p>
<p>angular挂载数据的方法</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> app = angular.module(<span class="string">'myApp'</span>, []);</span><br><span class="line">app.controller(<span class="string">'customersCtrl'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$scope</span>) </span>{</span><br><span class="line">  $scope.list = [{},{},{}];</span><br><span class="line">  $scope.method = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"angular"</span>);</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>vue挂载数据的方法</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> V = <span class="keyword">new</span> Vue({</span><br><span class="line">  el:<span class="string">"#app"</span>,</span><br><span class="line">  data:{</span><br><span class="line">    list:[{},{},{}]</span><br><span class="line">  },</span><br><span class="line">  methods:{</span><br><span class="line">    method:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"vue"</span>);</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>可以看出angular所有的数据和方法都是挂载在$scope上，</p>
<p>而vue的数据和方法都是挂载在vue上，只是数据挂载在vue的data,方法挂载在vue的methods上。</p>
<p>8.数据绑定<br>Angular 1 使用双向绑定，<br>Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。</p>
<p>10.总结：Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。 Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。</p>
<h3 id="v-if-与-v-show的区别？"><a href="#v-if-与-v-show的区别？" class="headerlink" title="v-if 与 v-show的区别？"></a>v-if 与 v-show的区别？</h3><p><code>v-show</code>，切换元素的display属性,来控制元素显示隐藏，初始化会渲染，适用频繁显示隐藏的元素,不能用在<code>&lt;template/&gt;</code>上；</p>
<p><code>v-if</code>，通过销毁并重建组件，来控制组件显示隐藏，初始化不会渲染，不适用频繁显示隐藏的组件，可以用在<code>&lt;template/&gt;</code>上。</p>
<h3 id="route-与-router的区别？"><a href="#route-与-router的区别？" class="headerlink" title="$route 与 $router的区别？"></a>$route 与 $router的区别？</h3><blockquote>
<p>参考文献：<a href="https://www.cnblogs.com/czy960731/p/9288830.html">https://www.cnblogs.com/czy960731/p/9288830.html</a></p>
</blockquote>
<p><strong>$router</strong></p>
<p>1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。</p>
<p>举例：history对象</p>
<p>$router.push({path:’home’});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录.</p>
<p>方法：</p>
<p>$router.replace({path:’home’});//替换路由，没有历史记录</p>
<p><strong>$route</strong></p>
<p>2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等</p>
<p>我们可以从vue devtools中看到每个路由对象的不同</p>
<p><img src="https://images2018.cnblogs.com/blog/1105858/201807/1105858-20180710141549348-1979766443.png" alt="$route"></p>
<p>这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。</p>
<ul>
<li><ul>
<li>$route.path<br>字符串，等于当前路由对象的路径，会被解析为绝对路径，如 <code>"/home/news"</code> 。</li>
<li>$route.params<br>对象，包含路由中的动态片段和全匹配片段的键值对</li>
<li>$route.query<br>对象，包含路由中查询参数的键值对。例如，对于 <code>/home/news/detail/01?favorite=yes</code> ，会得到<code>$route.query.favorite == 'yes'</code> 。</li>
<li>$route.router<br>路由规则所属的路由器（以及其所属的组件）。</li>
<li>$route.matched<br>数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。</li>
<li>$route.name<br>当前路径的名字，如果没有使用具名路径，则名字为空。</li>
</ul>
</li>
</ul>
<p><code>$route.path, $route.params, $route.name, $route.query</code>这几个属性很容易理解，看示例就能知道它们代表的含义 </p>
<h3 id="vue-js-的两个核心是什么？"><a href="#vue-js-的两个核心是什么？" class="headerlink" title="vue.js 的两个核心是什么？"></a>vue.js 的两个核心是什么？</h3><p><strong>数据驱动、组件系统</strong></p>
<p><strong>数据驱动：</strong>ViewModel，保证数据和视图的一致性。</p>
<p><strong>组件系统：</strong>应用类UI可以看作全部是由组件树构成的</p>
<h3 id="vue常见的指令？"><a href="#vue常见的指令？" class="headerlink" title="vue常见的指令？"></a>vue常见的指令？</h3><blockquote>
<p>参考文档：<a href="https://juejin.im/post/5d12cd9df265da1bb47d73bf">https://juejin.im/post/5d12cd9df265da1bb47d73bf</a></p>
</blockquote>
<p><code>v-show</code>、<code>v-if</code>、<code>v-else-if</code>、<code>v-else</code>、<code>v-for</code>、<code>v-on</code>、<code>v-bind</code>、<code>v-model</code>、<code>v-once</code>、<code>v-slot</code>、<code>v-html</code>、<code>v-text</code>。</p>
<p><code>v-show</code>，切换元素的display属性,来控制元素显示隐藏，初始化会渲染，适用频繁显示隐藏的元素,不能用在`上；</p>
<p><code>v-if</code>，通过销毁并重建组件，来控制组件显示隐藏，初始化不会渲染，不适用频繁显示隐藏的组件，可以用在`上；</p>
<p><code>v-else-if</code>，必须和<code>v-if</code>一起使用；</p>
<p><code>v-else</code>，必须和<code>v-if</code>一起使用；</p>
<p><code>v-for</code>，将Array、Object、Number、String数据循环渲染元素或者组件，渲染组件必须带上key，key要为数据中每项特定值比如ID；</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in Array"</span>&gt;</span>{{index}}-{{item}}<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(item,key,index) in Object"</span>&gt;</span>{{index}}-{{key}}--{{item}}<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in Number"</span>&gt;</span>{{item}}<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in String"</span>&gt;</span>{{index}}-{{item}}<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">myVue</span> <span class="attr">v-for</span>=<span class="string">"(item,key,index) in Object"</span> <span class="attr">:title</span>=<span class="string">"item.title"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span><span class="tag">&lt;/<span class="name">myVue</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">v-on，缩写 @，监听事件，如：@click、@submit、@dblclick</span><br></pre></td></tr></tbody></table></figure>
<ul>
<li><p>怎么获取div上点击的鼠标位置</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;div @click="a"&gt;&lt;/div&gt;</span><br><span class="line">&lt;div @click="b(1,2,$event)"&gt;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">methods:{</span><br><span class="line">    a(){</span><br><span class="line">        console.log(event.clientX,event.clientY)</span><br><span class="line">    },</span><br><span class="line">    b(num1,num2,$event){</span><br><span class="line">        console.log($event.clientX,$event.clientY)</span><br><span class="line">    },</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p>怎么阻止冒泡，怎么阻止默认事件</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">//阻止冒泡</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> @<span class="attr">click.stop</span>=<span class="string">"a"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">//阻止默认</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> @<span class="attr">click.prevent</span>=<span class="string">"b"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">//阻止冒泡阻止默认</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> @<span class="attr">click.stop.prevent</span>=<span class="string">"c"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p>怎么监听组件根元素的原生事件</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">myVue</span> @<span class="attr">click.native</span>=<span class="string">"d"</span>&gt;</span><span class="tag">&lt;/<span class="name">myVue</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
</li>
<li><p>怎么监听组件自定义事件</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">myVue</span> @<span class="attr">diy-event</span>=<span class="string">"f"</span>&gt;</span><span class="tag">&lt;/<span class="name">myVue</span>&gt;</span></span><br><span class="line">//组件中这样触发</span><br><span class="line">this.$emit('diyEvent',data)</span><br></pre></td></tr></tbody></table></figure>
</li>
</ul>
<p><code>v-bind</code>，缩写<code>:</code>,绑定动态属性；</p>
<p><code>v-model</code>，限制应用在 <code>&lt;input/&gt; &lt;textarea/&gt; &lt;select/&gt;</code>、表单 元素和组件上创建双向绑定，修饰符<code>v-model.lazy</code>懒监听、<code>v-model.number</code>将值转成有效的数字、<code>v-model.trim</code>过滤首尾空格；</p>
<p><strong>以上8个非常常用指令没说出来，可以考虑终止面试了</strong></p>
<p><code>v-text</code>，<code>&lt;div v-text=&gt;&lt;/div&gt;</code>等同<code></code>,  如果内容带有HTML标签，也作为普通字符输出。</p>
<p><code>v-html</code>，直接输出HTML，不会按Vue模板编译，会有XSS攻击分析，不要用在用户提交内容上；</p>
<p><code>v-once</code>，只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过,用于优化更新性能;</p>
<p><code>v-per</code>，跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译;</p>
<p><code>v-cloak</code>，防止页面加载时出现 vuejs 的变量名，需要css配合<code>[v-cloak] { display: none }</code>,几乎没怎么用；</p>
<p><code>v-slot</code>，在组件插槽里面详解。</p>
<h3 id="v-on可以绑定多个方法吗？"><a href="#v-on可以绑定多个方法吗？" class="headerlink" title="v-on可以绑定多个方法吗？"></a>v-on可以绑定多个方法吗？</h3><p>可以，<code>v-on</code>后面接一个对象，但是不支持事件修饰符。</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div v-on:{click:a,dblclick:b}&gt;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    methods:{</span><br><span class="line">        a(){</span><br><span class="line">            alert(1)</span><br><span class="line">        },</span><br><span class="line">        b(){</span><br><span class="line">            alert(2)</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>
<h3 id="怎么定义vue-router的动态路由？如何获取传递过来的值？"><a href="#怎么定义vue-router的动态路由？如何获取传递过来的值？" class="headerlink" title="怎么定义vue-router的动态路由？如何获取传递过来的值？"></a>怎么定义vue-router的动态路由？如何获取传递过来的值？</h3><p><strong>定义路由（数组）</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">   {</span><br><span class="line">       path: <span class="string">'/foo'</span>,</span><br><span class="line">       component: Foo</span><br><span class="line">   }</span><br><span class="line">];</span><br></pre></td></tr></tbody></table></figure>
<p><strong>创建 router 实例</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line">   routes</span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure>
<p><strong>挂载路由</strong></p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const app = new Vue({</span><br><span class="line">   routes</span><br><span class="line">}).mount('#app');</span><br></pre></td></tr></tbody></table></figure>
<p><strong>带参动态路由</strong></p>
<p><strong>动态路由</strong>的创建，主要是使用 path 属性过程中，使用动态路径参数，以冒号开头，如：</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line">    path: <span class="regexp">/user/</span>:id</span><br><span class="line">    component: User</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p><strong>获取路由参数</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$route.params.id</span><br></pre></td></tr></tbody></table></figure>
<h3 id="vue-router的作用"><a href="#vue-router的作用" class="headerlink" title="vue-router的作用"></a>vue-router的作用</h3><blockquote>
<p>参考文档：<a href="https://www.cnblogs.com/goloving/p/9211358.html">https://www.cnblogs.com/goloving/p/9211358.html</a></p>
<p><a href="https://www.bbsmax.com/A/ke5jkAEmdr/">https://www.bbsmax.com/A/ke5jkAEmdr/</a></p>
</blockquote>
<p>vue-router是vue单页面开发的路由，就是决定页面</p>
<p><router-link> 组件支持用户在具体有路由功能的应用中（点击）导航。通过to属性指定目标地址。</router-link></p>
<p>Props 属性</p>
<p>1、to</p>
<p>　　表示目标路由的链接。当被点击后，内部会立刻把to的值传到router-push()。</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link :to="home"&gt;Home&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">&lt;router-link :to="{ path: ‘home‘ }"&gt;Home&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">//命名路由</span><br><span class="line">&lt;router-link :to="{ name: ‘user‘, params: {userId: 123} }"&gt;Home&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">//带查询参数，下面的结果为/register?plan=private--&gt;</span><br><span class="line">&lt;router-link :to="{ path: ‘register‘, query: {plan: ‘private‘}}"&gt;Register&lt;/router-link&gt;</span><br></pre></td></tr></tbody></table></figure>
<p>2、replace</p>
<p>　　设置replace属性的话，当点击时，会调用roter.replace()而不是router.push()，所以导航后不会留下history记录，也就是不能回退到上一个页面</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link :to="{path: ‘/abc‘}" replace&gt;ABC&lt;/router-link&gt;</span><br></pre></td></tr></tbody></table></figure>
<p>3、append</p>
<p>　　设置append属性后，则在当前路径前添加基路径，例如，我们从/a导航到一个相对路径b，如果没有配置append，则路径为/b，如果配了，则为/a/b</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to="b" append&gt;Home&lt;/router-link&gt;</span><br></pre></td></tr></tbody></table></figure>
<p>4、tag</p>
<p>　　有时候想要<router-link>渲染成某种标签，例如</router-link></p><li>。于是我们使用tag prop 类指定何种标签，同样它还是会监听点击，触发导航。<p></p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to="/foo" tag="li"&gt;FOO&lt;/router-link&gt;</span><br><span class="line">// 渲染结果 </span><br><span class="line">&lt;li&gt;FOO&lt;/li&gt;</span><br></pre></td></tr></tbody></table></figure>
<p>5、active-class</p>
<p>　　设置链接激活时使用的css类名。默认值可以通过路由的构造选项linkActiveClass来全局配置, 默认值为 ‘router-link-active‘</p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">export default New Router({</span><br><span class="line">   linkActiveClass: ‘active‘ </span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>6、exact</p>
<p>　　“是否激活”，默认是false 。举个粟子，如果当前的路径是/a 开头的，那么<router-link to="/a"> 也会被设置css类名</router-link></p>
<p>　　按照这个规则，<router-link to="/"> 将会点亮各个路由！想要链接使用”exact匹配模式”，则使用exact属性：</router-link></p>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">// 这个链接只会在地址为 / 的时候被激活 </span><br><span class="line">&lt;router-link to="/" exact&gt;Home&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">&lt;router-link to="/user"&gt;USER&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">&lt;router-link to="/user/userinfo"&gt;USER-info&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">// 如果不设置exact，则当路由到了/user/userinfo 页面时，USER也是被设置了router-link-active样式的！</span><br></pre></td></tr></tbody></table></figure>
<p>7、events</p>
<p>　　声明可以用来触发导航的事件（默认是‘click‘）。可以是一个字符串或者是一个包含字符串的数组</p>
<p>8、将”激活时的css类名”应用在外层元素</p>
<p>　　有时候我们要让”激活的css类名”应用在外层元素，而不是<a>标签本身，那么可以用<router-link>渲染外层元素，包裹着内层的原生</router-link></a><a>标签</a></p><a>
<figure class="highlight plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link tag="li" to="/foo"&gt;</span><br><span class="line">    &lt;a&gt;/foo&lt;/a&gt;</span><br><span class="line">&lt;/router-link&gt;</span><br><span class="line">//在这种情况下，&lt;a&gt;将作为真实的链接（能获取到正确的href的），而"激活时的css类名"则设置到外层的&lt;li&gt;</span><br></pre></td></tr></tbody></table></figure>
<p>9、方法</p>
<p>　　router-link默认是触发router.push(location)，如果设置的replace 则触发router.replace(location)，这有啥区别呢？</p>
<p>　　router.push() ：导航跑到不同的URL,这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url.</p>
<p>　　router.replace(): 跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录.</p>
<p>　　router.go(n): 这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.Go(n)</p>
</a><h3 id="在vue中v-for为何要使用-key"><a></a><a href="#在vue中v-for为何要使用-key" class="headerlink" title="在vue中v-for为何要使用 :key"></a>在vue中v-for为何要使用 :key</h3><p>主要用于 动态为input中复选框、单选框 添加数组值，选中的属性还是处于选中状态，而不是新增的值。</p>
<p>为了能把F节点放在准确位置，我们给F节点添加一个key值来作为唯一标识。有了key，Diff算法就可以正确识别F节点并把它插入正确的位置。</p>
<blockquote>
<p>更多详情参考：<a href="https://www.jianshu.com/p/a228e2247649">https://www.jianshu.com/p/a228e2247649</a></p>
</blockquote>
<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><h3 id="前端页面由那三层构成？分别是什么？作用是什么？"><a href="#前端页面由那三层构成？分别是什么？作用是什么？" class="headerlink" title="前端页面由那三层构成？分别是什么？作用是什么？"></a>前端页面由那三层构成？分别是什么？作用是什么？</h3><ul>
<li><p>网页的<strong>结构层(structural layer)</strong> 由HTML或XHTML之类的标记语言负责创建</p>
<ul>
<li>标记语言也就是指网页的标签，标签只对网页内容的语义和含义做出描述，不包含任何关于如何显示内容的信息。</li>
</ul>
</li>
<li><p>网页的<strong>表示层(resentation layer)</strong>由CSS负责创建。</p>
<ul>
<li>作用是对内容如何显示做一定的控制。</li>
</ul>
</li>
<li><p>网页的<strong>行为层(behavior layer)</strong>由JavaScript语言和DOM创建。</p>
<ul>
<li>作用是控制用户做出一个事件该如何显示。例如：用户悬浮在某个元素上，弹出一个显示元素标题内容的提示框。</li>
</ul>
</li>
</ul>
<h3 id="列举IE与其他浏览器不同的特性？"><a href="#列举IE与其他浏览器不同的特性？" class="headerlink" title="列举IE与其他浏览器不同的特性？"></a>列举IE与其他浏览器不同的特性？</h3><blockquote>
<p>参考文献：<a href="https://blog.csdn.net/michael8512/article/details/78006427">https://blog.csdn.net/michael8512/article/details/78006427</a></p>
</blockquote>
<p>1）IE支持currentStyle，Firefox使用getComputStyle;</p>
<p>2）IE使用innerText，FireFox使用textContent；</p>
<p>3）滤镜方面：IE：filter:alpha(opacity= num)；Firefox：-moz-opacity:num；</p>
<p>4）事件方面：IE：attachEvent：火狐是addEventListener；</p>
<p>5）鼠标位置：IE是event.clientX；火狐是event.pageX；</p>
<p>6）IE使用event.srcElement；Firefox使用event.target；</p>
<p>7）IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none；</p>
<h3 id="请说出三种减少页面加载时间的方法？"><a href="#请说出三种减少页面加载时间的方法？" class="headerlink" title="请说出三种减少页面加载时间的方法？"></a>请说出三种减少页面加载时间的方法？</h3><blockquote>
<p>参考文献： <a href="https://www.cnblogs.com/yangguoe/p/8461906.html">https://www.cnblogs.com/yangguoe/p/8461906.html</a></p>
</blockquote>
<p>1.优化图片 </p>
<p>2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）</p>
<p>3.优化CSS（压缩合并css，如margin-top,margin-left…)</p>
<p>4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。） </p>
<p>5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）</p>
<p> 6.减少http请求（合并文件，合并图片）</p>
<hr>



<h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><ul>
<li>vue<ul>
<li><a href="https://juejin.im/post/5d12cd9df265da1bb47d73bf">Vue初级前端工程师面试必备</a></li>
<li><a href="https://juejin.im/post/5d6e6e916fb9a06b1b19dda3">Vue初级面试题汇总</a></li>
</ul>
</li>
</ul>
<p>等待更新中……</p>
</li><script>
        document.querySelectorAll('.github-emoji')
          .forEach(el => {
            if (!el.dataset.src) { return; }
            const img = document.createElement('img');
            img.style = 'display:none !important;';
            img.src = el.dataset.src;
            img.addEventListener('error', () => {
              img.remove();
              el.style.color = 'inherit';
              el.style.backgroundImage = 'none';
              el.style.background = 'none';
            });
            img.addEventListener('load', () => {
              img.remove();
            });
            document.body.appendChild(img);
          });
      </script>
        </div>
        
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <span class="is-size-6 has-text-grey has-mr-7">#</span>
                    <a class="has-link-grey -link" href="/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/" rel="tag">前端面试</a>
                </div>
            </div>
        </div>
        
        
        
        <div class="social-share"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js"></script>
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3>
        <div class="buttons is-centered">
            
                
<a class="button is-info donate">
    <span class="icon is-small">
        <i class="fab fa-alipay"></i>
    </span>
    <span>支付宝</span>
    <div class="qrcode"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.1/images/zalipay.jpg" alt="支付宝"></div>
</a>

                
                
<a class="button is-success donate">
    <span class="icon is-small">
        <i class="fab fa-weixin"></i>
    </span>
    <span>微信</span>
    <div class="qrcode"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.1/images/zweixinplay.jpg" alt="微信"></div>
</a>

                
        </div>
    </div>
</div>



<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/posts/1d48.html">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">关于 hexo 对文章渲染 {{ }} 解析的问题</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/posts/9406.html">
                <span class="level-item">初级前端面试总结-2</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="title is-5 has-text-weight-normal">评论</h3>
        
<div id="valine-thread" class="content"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js"></script>
<script>
    new Valine({
        el: '#valine-thread' ,
        notify: false,
        verify: true,
        app_id: 'LliwJqiOd8MS79CDFo9tGFEX-gzGzoHsz',
        app_key: '05cdCDsmfHxxo8UIOvcDFaq5',
        placeholder: 'just go go'
    });
</script>

    </div>
</div>
</div>
                
    

    

    

    


    <div class="column 11 is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
        
        
<!-- 个人资料 -->
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                    
                    <figure class="image is-128x128 has-mb-6">
                        <img class="is-rounded" src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.4/images/z_avater.png"
                            alt="Fox"
                            style="">
                    </figure>
                    
                    <p class="is-size-4 is-block">
                        Fox
                    </p>
                    
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>chengdu - china</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <a href="/archives">
                        <p class="title has-text-weight-normal">
                            17
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <a href="/categories">
                        <p class="title has-text-weight-normal">
                            5
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <a href="/tags">
                        <p class="title has-text-weight-normal">
                            13
                        </p>
                    </a>
                </div>
            </div>
        </nav>
        
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/foxhuli229" target="_blank"
                rel="noopener">
                关注我</a>
        </div>
        
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Github"
                href="https://github.com/foxhuli229">
                
                <i class="fab fa-github"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Facebook"
                href="https://facebook.com">
                
                <i class="fab fa-facebook"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Twitter"
                href="https://twitter.com">
                
                <i class="fab fa-twitter"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Dribbble"
                href="https://dribbble.com">
                
                <i class="fab fa-dribbble"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="RSS"
                href="/">
                
                <i class="fas fa-rss"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
        
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            <li>
        <a class="level is-marginless" href="/categories/hexo/">
            <span class="level-start">
                <span class="level-item">hexo</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/vue/">
            <span class="level-start">
                <span class="level-item">vue</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/">
            <span class="level-start">
                <span class="level-item">前端</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">12</span>
            </span>
        </a><ul><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/vue/">
            <span class="level-start">
                <span class="level-item">vue</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">
            <span class="level-start">
                <span class="level-item">面试</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">4</span>
            </span>
        </a></li></ul></li>
            </ul>
        </div>
    </div>
</div>
        
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                标签
            </h3>
            <div class="field is-grouped is-grouped-multiline">
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/JavaScript/">
                        <span class="tag">JavaScript</span>
                        <span class="tag is-grey">5</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/SVG/">
                        <span class="tag">SVG</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/cookie-%E4%B8%8E-webstorage%E7%9A%84%E5%8C%BA%E5%88%AB/">
                        <span class="tag">cookie 与 webstorage的区别</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/hexo/">
                        <span class="tag">hexo</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/hexo-theme-matery/">
                        <span class="tag">hexo-theme-matery</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/lightgallery-js/">
                        <span class="tag">lightgallery.js</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue/">
                        <span class="tag">vue</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue-admin-template/">
                        <span class="tag">vue-admin-template</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97/">
                        <span class="tag">vue异步加载模块</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue%E7%BB%84%E4%BB%B6/">
                        <span class="tag">vue组件</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/">
                        <span class="tag">前端面试</span>
                        <span class="tag is-grey">3</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E5%8E%BB%E5%93%AA%E5%84%BF%E7%BD%91/">
                        <span class="tag">去哪儿网</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E6%95%B0%E7%BB%84/">
                        <span class="tag">数组</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
            </div>
        </div>
    </div>
</div>
        
        
        <div class="column-right-shadow is-hidden-widescreen ">
            
            <!-- 个人信息-目录 -->


    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#面试题汇总">
        <span class="has-mr-6">1</span>
        <span>面试题汇总</span>
        </a></li><li>
        <a class="is-flex" href="#css">
        <span class="has-mr-6">2</span>
        <span>css</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。">
        <span class="has-mr-6">2.1</span>
        <span>如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。</span>
        </a></li><li>
        <a class="is-flex" href="#如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？">
        <span class="has-mr-6">2.2</span>
        <span>如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#如何水平居中一个div？">
        <span class="has-mr-6">2.2.1</span>
        <span>如何水平居中一个div？</span>
        </a></li><li>
        <a class="is-flex" href="#如何居中一个浮动元素？">
        <span class="has-mr-6">2.2.2</span>
        <span>如何居中一个浮动元素？</span>
        </a></li><li>
        <a class="is-flex" href="#如何让绝对定位的div居中">
        <span class="has-mr-6">2.2.3</span>
        <span>如何让绝对定位的div居中</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#用纯CSS创建一个三角形的原理是什么？">
        <span class="has-mr-6">2.3</span>
        <span>用纯CSS创建一个三角形的原理是什么？</span>
        </a></li><li>
        <a class="is-flex" href="#清除浮动的方法？">
        <span class="has-mr-6">2.4</span>
        <span>清除浮动的方法？</span>
        </a></li><li>
        <a class="is-flex" href="#实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？">
        <span class="has-mr-6">2.5</span>
        <span>实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#html">
        <span class="has-mr-6">3</span>
        <span>html</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#HTML中那些标签是-块级标签，那些是-行内标签，空标签">
        <span class="has-mr-6">3.1</span>
        <span>HTML中那些标签是 块级标签，那些是 行内标签，空标签</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#js">
        <span class="has-mr-6">4</span>
        <span>js</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#jQuery获取dom元素的方式">
        <span class="has-mr-6">4.1</span>
        <span>jQuery获取dom元素的方式</span>
        </a></li><li>
        <a class="is-flex" href="#js的数据类型">
        <span class="has-mr-6">4.2</span>
        <span>js的数据类型</span>
        </a></li><li>
        <a class="is-flex" href="#声明函数和异名函数的区别">
        <span class="has-mr-6">4.3</span>
        <span>声明函数和异名函数的区别</span>
        </a></li><li>
        <a class="is-flex" href="#js中全局变量和局部变量">
        <span class="has-mr-6">4.4</span>
        <span>js中全局变量和局部变量</span>
        </a></li><li>
        <a class="is-flex" href="#js中那些是存储在站里面，那些是存储在-队里面">
        <span class="has-mr-6">4.5</span>
        <span>js中那些是存储在站里面，那些是存储在 队里面</span>
        </a></li><li>
        <a class="is-flex" href="#闭包">
        <span class="has-mr-6">4.6</span>
        <span>闭包</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#特点">
        <span class="has-mr-6">4.6.1</span>
        <span>特点</span>
        </a></li><li>
        <a class="is-flex" href="#作用">
        <span class="has-mr-6">4.6.2</span>
        <span>作用</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#函数里面的this含义？什么情况下，怎么用？">
        <span class="has-mr-6">4.7</span>
        <span>函数里面的this含义？什么情况下，怎么用？</span>
        </a></li><li>
        <a class="is-flex" href="#实现一个倒计时功能？">
        <span class="has-mr-6">4.8</span>
        <span>实现一个倒计时功能？</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#网络-安全">
        <span class="has-mr-6">5</span>
        <span>网络/安全</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#IOS七层模型">
        <span class="has-mr-6">5.1</span>
        <span>IOS七层模型</span>
        </a></li><li>
        <a class="is-flex" href="#HTTP-TCP的区别">
        <span class="has-mr-6">5.2</span>
        <span>HTTP/TCP的区别</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#HTTP的优点">
        <span class="has-mr-6">5.2.1</span>
        <span>HTTP的优点</span>
        </a></li><li>
        <a class="is-flex" href="#TCP连接——三次握手">
        <span class="has-mr-6">5.2.2</span>
        <span>TCP连接——三次握手</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#常见的web攻击有哪些？如何防范？">
        <span class="has-mr-6">5.3</span>
        <span>常见的web攻击有哪些？如何防范？</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-xss跨站脚本攻击">
        <span class="has-mr-6">5.3.1</span>
        <span>1.xss跨站脚本攻击</span>
        </a></li><li>
        <a class="is-flex" href="#2-CSRF攻击流程">
        <span class="has-mr-6">5.3.2</span>
        <span>2.CSRF攻击流程</span>
        </a></li><li>
        <a class="is-flex" href="#3-SQL注入，关键是通过用sql语句伪造参数发出攻击">
        <span class="has-mr-6">5.3.3</span>
        <span>3.SQL注入，关键是通过用sql语句伪造参数发出攻击</span>
        </a></li><li>
        <a class="is-flex" href="#4-DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）">
        <span class="has-mr-6">5.3.4</span>
        <span>4.DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）</span>
        </a></li><li>
        <a class="is-flex" href="#5-DNS劫持：">
        <span class="has-mr-6">5.3.5</span>
        <span>5.DNS劫持：</span>
        </a></li></ul></li></ul></li><li>
        <a class="is-flex" href="#存储">
        <span class="has-mr-6">6</span>
        <span>存储</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#请谈谈cookie的区别？">
        <span class="has-mr-6">6.1</span>
        <span>请谈谈cookie的区别？</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#请求">
        <span class="has-mr-6">7</span>
        <span>请求</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#ajax同步请求-同时并发请求">
        <span class="has-mr-6">7.1</span>
        <span>ajax同步请求/同时并发请求</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#vue">
        <span class="has-mr-6">8</span>
        <span>vue</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#VUE中的MVVM的理解？">
        <span class="has-mr-6">8.1</span>
        <span>VUE中的MVVM的理解？</span>
        </a></li><li>
        <a class="is-flex" href="#vue生命周期的作用是什么？">
        <span class="has-mr-6">8.2</span>
        <span>vue生命周期的作用是什么？</span>
        </a></li><li>
        <a class="is-flex" href="#vue生命周期总共有几个阶段？">
        <span class="has-mr-6">8.3</span>
        <span>vue生命周期总共有几个阶段？</span>
        </a></li><li>
        <a class="is-flex" href="#第一次加载页面会触发那几个钩子？">
        <span class="has-mr-6">8.4</span>
        <span>第一次加载页面会触发那几个钩子？</span>
        </a></li><li>
        <a class="is-flex" href="#DOM渲染在哪个周期中就已经完成了？">
        <span class="has-mr-6">8.5</span>
        <span>DOM渲染在哪个周期中就已经完成了？</span>
        </a></li><li>
        <a class="is-flex" href="#父组件与子组件自己传值，兄弟组件传值？">
        <span class="has-mr-6">8.6</span>
        <span>父组件与子组件自己传值，兄弟组件传值？</span>
        </a></li><li>
        <a class="is-flex" href="#vue与react的区别？">
        <span class="has-mr-6">8.7</span>
        <span>vue与react的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#vue与angular的区别？">
        <span class="has-mr-6">8.8</span>
        <span>vue与angular的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#v-if-与-v-show的区别？">
        <span class="has-mr-6">8.9</span>
        <span>v-if 与 v-show的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#route-与-router的区别？">
        <span class="has-mr-6">8.10</span>
        <span>$route 与 $router的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#vue-js-的两个核心是什么？">
        <span class="has-mr-6">8.11</span>
        <span>vue.js 的两个核心是什么？</span>
        </a></li><li>
        <a class="is-flex" href="#vue常见的指令？">
        <span class="has-mr-6">8.12</span>
        <span>vue常见的指令？</span>
        </a></li><li>
        <a class="is-flex" href="#v-on可以绑定多个方法吗？">
        <span class="has-mr-6">8.13</span>
        <span>v-on可以绑定多个方法吗？</span>
        </a></li><li>
        <a class="is-flex" href="#怎么定义vue-router的动态路由？如何获取传递过来的值？">
        <span class="has-mr-6">8.14</span>
        <span>怎么定义vue-router的动态路由？如何获取传递过来的值？</span>
        </a></li><li>
        <a class="is-flex" href="#vue-router的作用">
        <span class="has-mr-6">8.15</span>
        <span>vue-router的作用</span>
        </a></li><li>
        <a class="is-flex" href="#在vue中v-for为何要使用-key">
        <span class="has-mr-6">8.16</span>
        <span>在vue中v-for为何要使用 :key</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#其他">
        <span class="has-mr-6">9</span>
        <span>其他</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#前端页面由那三层构成？分别是什么？作用是什么？">
        <span class="has-mr-6">9.1</span>
        <span>前端页面由那三层构成？分别是什么？作用是什么？</span>
        </a></li><li>
        <a class="is-flex" href="#列举IE与其他浏览器不同的特性？">
        <span class="has-mr-6">9.2</span>
        <span>列举IE与其他浏览器不同的特性？</span>
        </a></li><li>
        <a class="is-flex" href="#请说出三种减少页面加载时间的方法？">
        <span class="has-mr-6">9.3</span>
        <span>请说出三种减少页面加载时间的方法？</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#参考文献">
        <span class="has-mr-6">10</span>
        <span>参考文献</span>
        </a></li></ul>
            </div>
        </div>
    </div>

            
            <!-- 最近/最新的文章 -->
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/posts/7358.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="component组件嵌套，导致页面重复渲染，重复请求的bug">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-23T02:18:20.000Z">2020-05-23</time></div>
                    <a href="/posts/7358.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">component组件嵌套，导致页面重复渲染，重复请求的bug</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/2b18.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="vue异步加载模块">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-22T23:18:18.000Z">2020-05-23</time></div>
                    <a href="/posts/2b18.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue异步加载模块</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/54f1.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://panjiachen.gitee.io/vue-element-admin-site/home.png" alt="vue-admin-template模板添加tagsview">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T16:22:02.000Z">2020-05-03</time></div>
                    <a href="/posts/54f1.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue-admin-template模板添加tagsview</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/1d48.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051132835,1344326547&amp;fm=26&amp;gp=0.jpg" alt="关于 hexo 对文章渲染 {{ }} 解析的问题">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T09:40:49.000Z">2020-05-02</time></div>
                    <a href="/posts/1d48.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">关于 hexo 对文章渲染 {{ }} 解析的问题</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/hexo/">hexo</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/6659.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time></div>
                    <a href="/posts/6659.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">初级前端综合面试题-3</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
            
            <!-- 个人信息-归档 -->
<div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/05/">
                <span class="level-start">
                    <span class="level-item">五月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/04/">
                <span class="level-start">
                    <span class="level-item">四月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">一月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">十二月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
            
        </div>
        
    </div>


                
    

    

    

    


    <div class="column 11 is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right ">
        
        <!-- 个人信息-目录 -->


    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#面试题汇总">
        <span class="has-mr-6">1</span>
        <span>面试题汇总</span>
        </a></li><li>
        <a class="is-flex" href="#css">
        <span class="has-mr-6">2</span>
        <span>css</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。">
        <span class="has-mr-6">2.1</span>
        <span>如何让文字居中。分辨率较大的话，如何让图片清晰居中显示。</span>
        </a></li><li>
        <a class="is-flex" href="#如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？">
        <span class="has-mr-6">2.2</span>
        <span>如何居中div？如何实现居中一个浮动元素？如果让绝对定位的div居中？</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#如何水平居中一个div？">
        <span class="has-mr-6">2.2.1</span>
        <span>如何水平居中一个div？</span>
        </a></li><li>
        <a class="is-flex" href="#如何居中一个浮动元素？">
        <span class="has-mr-6">2.2.2</span>
        <span>如何居中一个浮动元素？</span>
        </a></li><li>
        <a class="is-flex" href="#如何让绝对定位的div居中">
        <span class="has-mr-6">2.2.3</span>
        <span>如何让绝对定位的div居中</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#用纯CSS创建一个三角形的原理是什么？">
        <span class="has-mr-6">2.3</span>
        <span>用纯CSS创建一个三角形的原理是什么？</span>
        </a></li><li>
        <a class="is-flex" href="#清除浮动的方法？">
        <span class="has-mr-6">2.4</span>
        <span>清除浮动的方法？</span>
        </a></li><li>
        <a class="is-flex" href="#实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？">
        <span class="has-mr-6">2.5</span>
        <span>实现预加载一张图片，加载完成后显示在网页中并设定其高度为50px？</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#html">
        <span class="has-mr-6">3</span>
        <span>html</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#HTML中那些标签是-块级标签，那些是-行内标签，空标签">
        <span class="has-mr-6">3.1</span>
        <span>HTML中那些标签是 块级标签，那些是 行内标签，空标签</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#js">
        <span class="has-mr-6">4</span>
        <span>js</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#jQuery获取dom元素的方式">
        <span class="has-mr-6">4.1</span>
        <span>jQuery获取dom元素的方式</span>
        </a></li><li>
        <a class="is-flex" href="#js的数据类型">
        <span class="has-mr-6">4.2</span>
        <span>js的数据类型</span>
        </a></li><li>
        <a class="is-flex" href="#声明函数和异名函数的区别">
        <span class="has-mr-6">4.3</span>
        <span>声明函数和异名函数的区别</span>
        </a></li><li>
        <a class="is-flex" href="#js中全局变量和局部变量">
        <span class="has-mr-6">4.4</span>
        <span>js中全局变量和局部变量</span>
        </a></li><li>
        <a class="is-flex" href="#js中那些是存储在站里面，那些是存储在-队里面">
        <span class="has-mr-6">4.5</span>
        <span>js中那些是存储在站里面，那些是存储在 队里面</span>
        </a></li><li>
        <a class="is-flex" href="#闭包">
        <span class="has-mr-6">4.6</span>
        <span>闭包</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#特点">
        <span class="has-mr-6">4.6.1</span>
        <span>特点</span>
        </a></li><li>
        <a class="is-flex" href="#作用">
        <span class="has-mr-6">4.6.2</span>
        <span>作用</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#函数里面的this含义？什么情况下，怎么用？">
        <span class="has-mr-6">4.7</span>
        <span>函数里面的this含义？什么情况下，怎么用？</span>
        </a></li><li>
        <a class="is-flex" href="#实现一个倒计时功能？">
        <span class="has-mr-6">4.8</span>
        <span>实现一个倒计时功能？</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#网络-安全">
        <span class="has-mr-6">5</span>
        <span>网络/安全</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#IOS七层模型">
        <span class="has-mr-6">5.1</span>
        <span>IOS七层模型</span>
        </a></li><li>
        <a class="is-flex" href="#HTTP-TCP的区别">
        <span class="has-mr-6">5.2</span>
        <span>HTTP/TCP的区别</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#HTTP的优点">
        <span class="has-mr-6">5.2.1</span>
        <span>HTTP的优点</span>
        </a></li><li>
        <a class="is-flex" href="#TCP连接——三次握手">
        <span class="has-mr-6">5.2.2</span>
        <span>TCP连接——三次握手</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#常见的web攻击有哪些？如何防范？">
        <span class="has-mr-6">5.3</span>
        <span>常见的web攻击有哪些？如何防范？</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-xss跨站脚本攻击">
        <span class="has-mr-6">5.3.1</span>
        <span>1.xss跨站脚本攻击</span>
        </a></li><li>
        <a class="is-flex" href="#2-CSRF攻击流程">
        <span class="has-mr-6">5.3.2</span>
        <span>2.CSRF攻击流程</span>
        </a></li><li>
        <a class="is-flex" href="#3-SQL注入，关键是通过用sql语句伪造参数发出攻击">
        <span class="has-mr-6">5.3.3</span>
        <span>3.SQL注入，关键是通过用sql语句伪造参数发出攻击</span>
        </a></li><li>
        <a class="is-flex" href="#4-DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）">
        <span class="has-mr-6">5.3.4</span>
        <span>4.DDOS攻击（关键是通过手段发出大量请求，最后令服务器崩溃）</span>
        </a></li><li>
        <a class="is-flex" href="#5-DNS劫持：">
        <span class="has-mr-6">5.3.5</span>
        <span>5.DNS劫持：</span>
        </a></li></ul></li></ul></li><li>
        <a class="is-flex" href="#存储">
        <span class="has-mr-6">6</span>
        <span>存储</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#请谈谈cookie的区别？">
        <span class="has-mr-6">6.1</span>
        <span>请谈谈cookie的区别？</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#请求">
        <span class="has-mr-6">7</span>
        <span>请求</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#ajax同步请求-同时并发请求">
        <span class="has-mr-6">7.1</span>
        <span>ajax同步请求/同时并发请求</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#vue">
        <span class="has-mr-6">8</span>
        <span>vue</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#VUE中的MVVM的理解？">
        <span class="has-mr-6">8.1</span>
        <span>VUE中的MVVM的理解？</span>
        </a></li><li>
        <a class="is-flex" href="#vue生命周期的作用是什么？">
        <span class="has-mr-6">8.2</span>
        <span>vue生命周期的作用是什么？</span>
        </a></li><li>
        <a class="is-flex" href="#vue生命周期总共有几个阶段？">
        <span class="has-mr-6">8.3</span>
        <span>vue生命周期总共有几个阶段？</span>
        </a></li><li>
        <a class="is-flex" href="#第一次加载页面会触发那几个钩子？">
        <span class="has-mr-6">8.4</span>
        <span>第一次加载页面会触发那几个钩子？</span>
        </a></li><li>
        <a class="is-flex" href="#DOM渲染在哪个周期中就已经完成了？">
        <span class="has-mr-6">8.5</span>
        <span>DOM渲染在哪个周期中就已经完成了？</span>
        </a></li><li>
        <a class="is-flex" href="#父组件与子组件自己传值，兄弟组件传值？">
        <span class="has-mr-6">8.6</span>
        <span>父组件与子组件自己传值，兄弟组件传值？</span>
        </a></li><li>
        <a class="is-flex" href="#vue与react的区别？">
        <span class="has-mr-6">8.7</span>
        <span>vue与react的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#vue与angular的区别？">
        <span class="has-mr-6">8.8</span>
        <span>vue与angular的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#v-if-与-v-show的区别？">
        <span class="has-mr-6">8.9</span>
        <span>v-if 与 v-show的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#route-与-router的区别？">
        <span class="has-mr-6">8.10</span>
        <span>$route 与 $router的区别？</span>
        </a></li><li>
        <a class="is-flex" href="#vue-js-的两个核心是什么？">
        <span class="has-mr-6">8.11</span>
        <span>vue.js 的两个核心是什么？</span>
        </a></li><li>
        <a class="is-flex" href="#vue常见的指令？">
        <span class="has-mr-6">8.12</span>
        <span>vue常见的指令？</span>
        </a></li><li>
        <a class="is-flex" href="#v-on可以绑定多个方法吗？">
        <span class="has-mr-6">8.13</span>
        <span>v-on可以绑定多个方法吗？</span>
        </a></li><li>
        <a class="is-flex" href="#怎么定义vue-router的动态路由？如何获取传递过来的值？">
        <span class="has-mr-6">8.14</span>
        <span>怎么定义vue-router的动态路由？如何获取传递过来的值？</span>
        </a></li><li>
        <a class="is-flex" href="#vue-router的作用">
        <span class="has-mr-6">8.15</span>
        <span>vue-router的作用</span>
        </a></li><li>
        <a class="is-flex" href="#在vue中v-for为何要使用-key">
        <span class="has-mr-6">8.16</span>
        <span>在vue中v-for为何要使用 :key</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#其他">
        <span class="has-mr-6">9</span>
        <span>其他</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#前端页面由那三层构成？分别是什么？作用是什么？">
        <span class="has-mr-6">9.1</span>
        <span>前端页面由那三层构成？分别是什么？作用是什么？</span>
        </a></li><li>
        <a class="is-flex" href="#列举IE与其他浏览器不同的特性？">
        <span class="has-mr-6">9.2</span>
        <span>列举IE与其他浏览器不同的特性？</span>
        </a></li><li>
        <a class="is-flex" href="#请说出三种减少页面加载时间的方法？">
        <span class="has-mr-6">9.3</span>
        <span>请说出三种减少页面加载时间的方法？</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#参考文献">
        <span class="has-mr-6">10</span>
        <span>参考文献</span>
        </a></li></ul>
            </div>
        </div>
    </div>

        
        <!-- 最近/最新的文章 -->
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/posts/7358.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="component组件嵌套，导致页面重复渲染，重复请求的bug">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-23T02:18:20.000Z">2020-05-23</time></div>
                    <a href="/posts/7358.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">component组件嵌套，导致页面重复渲染，重复请求的bug</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/2b18.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="vue异步加载模块">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-22T23:18:18.000Z">2020-05-23</time></div>
                    <a href="/posts/2b18.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue异步加载模块</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/54f1.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://panjiachen.gitee.io/vue-element-admin-site/home.png" alt="vue-admin-template模板添加tagsview">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T16:22:02.000Z">2020-05-03</time></div>
                    <a href="/posts/54f1.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue-admin-template模板添加tagsview</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/1d48.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051132835,1344326547&amp;fm=26&amp;gp=0.jpg" alt="关于 hexo 对文章渲染 {{ }} 解析的问题">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T09:40:49.000Z">2020-05-02</time></div>
                    <a href="/posts/1d48.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">关于 hexo 对文章渲染 {{ }} 解析的问题</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/hexo/">hexo</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/6659.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time></div>
                    <a href="/posts/6659.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">初级前端综合面试题-3</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
        
        <!-- 个人信息-归档 -->
<div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/05/">
                <span class="level-start">
                    <span class="level-item">五月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/04/">
                <span class="level-start">
                    <span class="level-item">四月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">一月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">十二月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
        
        
    </div>


            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container">
        <div class="level">
            <div class="level-start has-text-centered-mobile">
                <!-- <a class="footer-logo is-block has-mb-6" href="/">
                    
                    <img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.5/images/foxlogo.png" alt="初级前端综合面试题-3" height="28">
                    
                </a> -->
                <p class="is-size-7">

                    
                    <!-- 不蒜子统计 -->
                    <span id="busuanzi_container_site_uv">
                        ❤️ 感谢 <span id="busuanzi_value_site_uv">0</span> 位小伙伴
                        的 <span id="busuanzi_value_page_pv">0</span> 次陪伴
                    </span>
                    

                    
                        <br>
                        <span id="sitetime">载入运行时间...</span>
                        <script>
                            function siteTime() {
                                var seconds = 1000;
                                var minutes = seconds * 60;
                                var hours = minutes * 60;
                                var days = hours * 24;
                                var years = days * 365;
                                var today = new Date();
                                var startYear = "2020";
                                var startMonth = "3";
                                var startDate = "08";
                                var startHour = "0";
                                var startMinute = "0";
                                var startSecond = "0";
                                var todayYear = today.getFullYear();
                                var todayMonth = today.getMonth() + 1;
                                var todayDate = today.getDate();
                                var todayHour = today.getHours();
                                var todayMinute = today.getMinutes();
                                var todaySecond = today.getSeconds();
                                var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                                var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                                var diff = t2 - t1;
                                var diffYears = Math.floor(diff / years);
                                var diffDays = Math.floor((diff / days) - diffYears * 365);
                                var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                                var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                                    minutes);
                                var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                                    diffMinutes * minutes) / seconds);
                                if (startYear == todayYear) {
                                    // document.getElementById("year").innerHTML = todayYear;
                                    document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                                        " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                                } else {
                                    // document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                                    document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                                        " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                                }
                            }
                            setInterval(siteTime, 1000);
                        </script>
                    

                    <!-- 站长统计 -->
                    
                        <br>
                        <script type="text/javascript">
                            document.write(unescape("%3Cspan id='cnzz_stat_icon_1278694833'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1278694833%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));
                        </script>
                    

                    <!-- 域名信息 -->
                    
                    <br>
                    <span id="icp"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/medias/icp.png"
                            style="vertical-align: text-bottom;" />
                        <a href="http://beian.miit.gov.cn/state/outPortal/loginPortal.action" target="_blank">渝ICP备18015404号</a>
                    </span>
                    

                    <br>
                    <!-- 版权信息 -->
                    
                    &copy; 2020 Fox&nbsp;
                    Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
                    & <a href="https://foxhuli.top/" target="_blank" rel="noopener">Fox</a>
                </p>
            </div>

            <!-- 访问链接 -->
            <div class="level-end">
                
                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="掘金"
                            href="https://juejin.im/user/5d36544b6fb9a07efd474ae0/">
                            
                                
                                    <span>掘</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="简书"
                            href="https://www.jianshu.com/u/e1f2e756cb5e/">
                            
                                
                                    <span>简</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="知乎"
                            href="https://www.zhihu.com/people/hu-li-60-36-4/activities/">
                            
                                
                                    <span>知</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="CDSN"
                            href="https://blog.csdn.net/xiaohuli_hyr/">
                            
                                
                                    <span>C</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="My GitHub"
                            href="https://github.com/foxhuli229?tab=repositories">
                            
                                
                                    <i class="fab fa-github"></i>
                                
                            
                        </a>
                    </p>
                    
                </div>
                
            </div>

        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>


<script>
var IcarusThemeSettings = {
    site: {
        url: 'https://foxhuli.top',
        external_link: {"enable":true,"exclude":[]}
    },
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>





<script src="/js/animation.js"></script>



<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
<script src="/js/gallery.js" defer></script>



<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>





<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/js/back-to-top.js" defer></script>














<script src="/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/js/insight.js" defer></script>
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" href="/css/insight.css">
    
    

    <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/libs/jquery/jquery.min.js"></script>

    <!-- 引用 鼠标点击实现文字效果 -->
    <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/click_show_text.js"></script>

    <!-- //只在桌面版网页启用特效 -->
    <!-- <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/sakura.js"><\/script>');
        }
    </script> -->

     <!-- 实现 鼠标划过彩虹星星掉落跟随效果 -->
     <!-- <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/cursor.js"></script> -->

      <!-- tidio聊天工具 -->
    <!-- <script src="//code.tidio.co/hcpgs6vy7zc60cdqvx033yuue25y9vgj.js" async></script> -->

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js?t=1590368958168')
    .then(function () {console.log('ServiceWorker Register Successfully.')})
    .catch(function (e) {console.error(e)});
}
</script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false});</script></body>
</html>